import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    Dimensions,
    ListView,
    TouchableOpacity,
    TextInput,
    AsyncStorage,
    DeviceEventEmitter,
    StatusBar,
    ScrollView,
    Platform
} from 'react-native';
import Config from '../../common/Config'
import Utils from '../../common/Utils'
import {Toast,ModalIndicator} from 'teaset';
const STORAGE_KEY_TOKEN = '@AsyncStorageDemo:key_token';
const {height, width} = Dimensions.get('window');
export default class LoanPersonalInformationPage extends Component {
    componentDidMount() {
        this._loadInitialState().done();
    }
    async _loadInitialState(){
        try{
            let value=await AsyncStorage.getItem(STORAGE_KEY_TOKEN);
            if(value!==null){
                this._appendMessage(value);
            }else{
                this._appendMessage('');
            }
        }catch(error){
            this._appendMessage('AsyncStorage错误'+error.message);
        }
    }
    _appendMessage=(message)=>{
        this.setState({
            token:this.state.token.concat(message)
        },()=>this.getInfo());
    };
    getInfo=()=>{
        let params={
            "token":this.state.token,
            "lendingId":this.props.id
        };
        ModalIndicator.show("正在请求数据......");
        fetch(Config.baseApi+'/lending/queryOne',{
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: Utils.getParamsString(params)
        })
            .then((response) => response.json())
            .then((responseJson) => {
                ModalIndicator.hide();
                if(responseJson.status!==1){
                    this.setState({
                        data:responseJson.data
                    })
                }else{
                    Toast.message(responseJson.msg);
                }
            })
            .catch((error) => {
                ModalIndicator.hide();
                Toast.message(error);
            });
    };
    constructor(props) {
        super(props);
        this.state = {
            token:'',
            data:[],
        }
    };

    goToPop=()=>{
        Actions.PaginationPage();
        Actions.refresh();
        DeviceEventEmitter.emit('refresh','sss')
    };

    render() {
        const {data}=this.state;
        return (
            <View style={styles.container}>
                <StatusBar
                    backgroundColor='white'
                    barStyle={'dark-content'}/>
                <View style={styles.titleView}>
                    <Text style={styles.titleMsg}>个人资料</Text>
                    <TouchableOpacity
                        onPress={()=>this.goToPop()}
                        style={styles.goBackView}>
                        <Image
                            source={ImageUtil.GoBack}
                            style={styles.goBackImg}/>
                    </TouchableOpacity>
                    <TouchableOpacity
                        onPress={()=>Actions.ModifyLendingInformationPage({id:this.props.id})}
                        style={styles.completeView}>
                        <Text style={styles.completeMsg}>编辑</Text>
                    </TouchableOpacity>
                </View>
                <ScrollView>
                    <View style={styles.dataView}>
                        <View style={styles.labelView}>
                            <Text style={styles.labelLabellingMsg}>姓        名</Text>
                            <Text style={styles.symbolMsg}>:</Text>
                            <Text style={styles.labelInformationMsg}>{data.name}</Text>
                        </View>
                        <View style={styles.labelView}>
                            <Text style={styles.labelLabellingMsg}>身份证号</Text>
                            <Text style={styles.symbolMsg}>:</Text>
                            <Text style={styles.labelInformationMsg}>{data.idCard}</Text>
                        </View>
                        <View style={styles.labelView}>
                            <Text style={styles.labelLabellingMsg}>手机号码</Text>
                            <Text style={styles.symbolMsg}>:</Text>
                            <Text style={styles.labelInformationMsg}>{data.phone}</Text>
                        </View>
                        <View style={styles.labelView}>
                            <Text style={styles.labelLabellingMsg}>户口地址</Text>
                            <Text style={styles.symbolMsg}>:</Text>
                            <Text style={styles.labelInformationMsg}>{data.address}</Text>
                        </View>
                        <View style={styles.labelView}>
                            <Text style={styles.labelLabellingMsg}>所在地区</Text>
                            <Text style={styles.symbolMsg}>:</Text>
                            <Text style={styles.labelInformationMsg}>{data.area}</Text>
                        </View>
                        <View style={styles.labelView}>
                            <Text style={styles.labelLabellingMsg}>借款日期</Text>
                            <Text style={styles.symbolMsg}>:</Text>
                            <Text style={styles.labelInformationMsg}>{data.borrowingTimeStr}</Text>
                            <Text style={styles.labelMsg}>借款金额</Text>
                            <Text style={styles.symbolMsg}>:</Text>
                            <View style={{height:40,width:90,justifyContent:'center',marginLeft:12}}>
                                <Text style={{fontSize:27/2, color:'#646464'}}>{data.borrowingMoney}</Text>
                            </View>
                        </View>
                        <View style={[styles.labelView,{borderBottomWidth:0}]}>
                            <Text style={styles.labelLabellingMsg}>还款日期</Text>
                            <Text style={styles.symbolMsg}>:</Text>
                            <Text style={styles.labelInformationMsg}>{data.repaymentTimeStr}</Text>
                            <Text style={styles.labelMsg}>还款金额</Text>
                            <Text style={styles.symbolMsg}>:</Text>
                            <View style={{height:40,width:90,justifyContent:'center',marginLeft:12}}>
                                <Text style={{fontSize:27/2, color:'#646464'}}>{data.repaymentMoney}</Text>
                            </View>
                        </View>
                    </View>
                    <View>
                        <Text style={{marginTop:18,marginLeft:15,marginBottom:13,fontSize:27/2}}>备注</Text>
                    </View>
                    <View style={styles.remarkView}>
                        {data.remark
                            ?(<Text style={styles.remarkMsg}>{data.remark}</Text>)
                            :(<Text style={styles.remarkMsgChange}>未输入此人借款情况描述</Text>)}
                        <View style={styles.allImgView}>
                            {data.photoList
                                ? data.photoList.map((i,index) =>
                                    <View key={index}>
                                        {this.renderImage(i,data.photoList)}
                                    </View>)
                                : null}
                            <Image
                                source={ImageUtil.AddImage}
                                style={styles.remarkImg}/>
                        </View>
                    </View>
                    <View style={{height:40}}/>
                </ScrollView>
            </View>
        );
    }

    renderImage=(image,images)=> {
        return (<TouchableOpacity>
            <Image style={styles.remarkImg}
                   source={{uri:"http://106.14.209.177/upload/"+image.name}} />
        </TouchableOpacity>)
    };

}

const styles = StyleSheet.create({
    container: {
        flex:1,
        backgroundColor:'#f0f0f0'
    },
    titleView:{
        backgroundColor:'#ffffff',
        alignItems:'center',
        justifyContent:'center',
        borderBottomWidth:1,
        borderColor:'#e4e4e4',
        height:Platform.OS==='ios'?64:44
    },
    titleMsg:{
        fontSize:17,
        color:'#000000',
        marginTop:Platform.OS==='ios'?34:14,
        marginBottom:29/2
    },
    goBackView:{
        position: 'absolute',
        top:Platform.OS==='ios'?65/2:25/2,left:15,
    },
    goBackImg:{
        height:18,
        width:18
    },
    completeView:{
        position: 'absolute',
        right:15,bottom:Platform.OS==='ios'?29/2:12
    },
    completeMsg:{
        color:'#3090dd',
        fontSize:17
    },
    dataView:{
        backgroundColor:'#ffffff',
        marginTop:10,
        alignItems:'center',
        borderBottomWidth:1,
        borderColor:'#cacaca'
    },
    labelView:{
        flexDirection:'row',
        alignItems:'center',
        width:width-30,
        height:44,
        borderBottomWidth:1,
        borderColor:'#e2e2e2'
    },
    labelLabellingMsg:{
        fontSize:27/2,
        color:'#000000'
    },
    symbolMsg:{
        marginLeft:10,
        fontSize:27/2
    },
    labelInformationMsg:{
        marginLeft:17,
        fontSize:27/2,
        color:'#646464'
    },
    remarkView:{
        backgroundColor:'#ffffff',
        borderRadius:5,
        width:width-30,
        marginLeft:15,
    },
    remarkMsg:{
        marginTop:14,
        marginLeft:18,
        fontSize:27/2,
        width:width-66,
        height:50
    },
    allImgView:{
        marginTop:10,
        marginLeft:13,
        flexDirection:'row',
        width:width-60,
        flexWrap:'wrap'
    },
    remarkImg:{
        marginLeft:10,
        marginBottom:10,
        height:64,
        width:64,
        borderRadius:5
    },
    labelMsg:{
        fontSize:27/2,
        color:'#000000',
    },
    remarkMsgChange:{
        marginTop:14,
        marginLeft:18,
        fontSize:27/2,
        width:width-66,
        height:50,
        color:'#b2b2b2'
    }
});
